<template>
  <!-- 活动申报 -->
  <view class="declarationAct">
    <u-tabs
      :list="list"
      lineColor="#2488F5"
      lineWidth="25"
      :current="activeIndex"
      :inactiveStyle="inactiveStyle"
      :activeStyle="{ color: '#333333' }"
      @click="tabsClick"
    ></u-tabs>

    <view
      class="wrapper-content"
      :class="activeIndex == 0 ? 'wrapper-conHeight' : ''"
    >
      <template v-if="activeIndex == 0">
        <scroll-view
          scroll-y="true"
          @scrolltolower="scrollBottom"
          @scroll="scrollHeight"
          :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]"
          v-if="dataSource.length"
        >
          <view
            class="allList wrapper-item"
            v-for="(item, i) in dataSource"
            :key="i"
            :data-url="`/declarationAct/actDetail/actDetail?data=${encodeURIComponent(
              JSON.stringify({ ...item, index: activeIndex })
            )}`"
            @click="handleClickRouter"
          >
            <view class="rtEmployee">
              <view class="line-hidden title">
                {{ item.activityName }}
              </view>
              <view class="line-hidden footer">
                举办单位：<text>{{ item.hostUnit }}</text>
              </view>
              <view class="line-hidden footer">
                举办时间：<text>
                  {{ item.beginTime }}至{{ item.endTime }}
                </text>
              </view>
              <view class="line-hidden footer">
                举办地址：<text>{{ item.activityLocation }}</text>
              </view>
              <view class="line-hidden footer">
                申报时间：<text>{{ item.createTime }}</text>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <template v-if="activeIndex == 1">
        <scroll-view
          scroll-y="true"
          @scrolltolower="scrollBottom"
          @scroll="scrollHeight"
          :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]"
          v-if="dataSource.length"
        >
          <view
            class="allList wrapper-item"
            v-for="(item, i) in dataSource"
            :key="i"
            :data-url="`/declarationAct/actDetail/actDetail?data=${encodeURIComponent(
              JSON.stringify({ ...item, index: activeIndex })
            )}`"
            @click="handleClickRouter"
          >
            <view class="rtEmployee">
              <view class="examineItem">
                <view class="exam-lt">
                  <view class="line-hidden title">
                    {{ item.activityName }}
                  </view>
                  <view class="line-hidden footer">
                    通过时间：<text>{{ item.examineTime }}</text>
                  </view>
                  <view class="line-hidden footer">
                    举办地址：<text>{{ item.activityLocation }}</text>
                  </view>
                </view>
                <view class="rt">
                  <image
                    :src="
                      item.hostingStatus == 1
                        ? baseImgUrl + 'act_icon1.png'
                        : item.hostingStatus == 2
                        ? baseImgUrl + 'act_icon2.png'
                        : baseImgUrl + 'act_icon3.png'
                    "
                    mode=""
                  ></image>
                </view>
              </view>
              <view class="line-hidden footer">
                举办时间：<text v-if="item.beginTime">
                  {{ item.beginTime }}至{{ item.endTime }}
                </text>
                <text v-else>----</text>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <template v-if="activeIndex == 2">
        <scroll-view
          scroll-y="true"
          @scrolltolower="scrollBottom"
          @scroll="scrollHeight"
          :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]"
          v-if="dataSource.length"
        >
          <view
            class="allList wrapper-item"
            v-for="(item, i) in dataSource"
            :key="i"
            :data-url="`/declarationAct/actDetail/actDetail?data=${encodeURIComponent(
              JSON.stringify({ ...item, index: activeIndex })
            )}`"
            @click="handleClickRouter"
          >
            <view class="rtEmployee">
              <view class="line-hidden title">
                {{ item.activityName }}
              </view>
              <view class="line-hidden footer">
                申报人员：<text>{{ item.declarationPersonnel }}</text>
              </view>
              <view class="line-hidden footer">
                举办单位：<text>{{ item.hostUnit }}</text>
              </view>
              <view class="line-hidden footer">
                拒绝时间：<text>{{ item.examineTime }}</text>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
        >
        </u-empty>
      </view>
    </view>

    <view class="btns" v-if="activeIndex == 0">
      <button
        class="submit-btn"
        type="primary"
        style="width: 100%"
        :data-url="`/declarationAct/newActDeclaration/newActDeclaration`"
        @click="handleClickRouter"
      >
        活动申报
      </button>
    </view>
  </view>
</template>

<script>
import { activityDeclarationPage } from "@/api/myself.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  data() {
    return {
      activeIndex: 0,
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      scrollTop: 0,
      list: [
        {
          name: "待审核",
          badge: {
            isDot: false,
          },
        },
        {
          name: "审核通过",
          badge: {
            isDot: false,
          },
        },
        {
          name: "审核拒绝",
          badge: {
            isDot: false,
          },
        },
      ],
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.scrollTop = 0;
    uni.removeStorageSync("scrollTop");

    this.activeIndex == 0;
    this.pageConfig.pageNo = 1;
    this.dataSource = [];
    this.getList();
  },
  onShow() {
    this.scrollTop = uni.getStorageSync("scrollTop") || 0;

    let declarationAct = uni.getStorageSync("declarationAct");
    if (declarationAct) {
      this.activeIndex == 0;
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
      uni.setStorageSync("declarationAct", false);
    }

    let declarationActTwo = uni.getStorageSync("declarationActTwo");
    if (declarationActTwo) {
      this.activeIndex == 1;
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
      uni.setStorageSync("declarationActTwo", false);
    }
  },
  methods: {
    handleClickRouter,
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom(e) {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    tabsClick(item) {
      this.scrollTop = 0;
      uni.removeStorageSync("scrollTop");

      this.activeIndex = item.index;
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
    },
    getList() {
      let data = {
        status: this.activeIndex + 1,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      activityDeclarationPage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.declarationAct {
  height: 100%;

  .wrapper-content {
    padding: 24rpx 16rpx;
    background: #f8f9fb;
    height: calc(100vh - 45px);

    .wrapper-item {
      padding: 30rpx 35rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;

      .rtEmployee {
        font-size: 26rpx;
        line-height: 53rpx;
        width: 100%;

        .title {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
        }

        .footer {
          color: #a1a1a1;

          text {
            color: #666666;
          }
        }

        .examineItem {
          display: flex;
          .exam-lt {
            width: 480rpx;
            max-width: 480rpx;
          }

          .rt {
            align-self: center;
            width: 130rpx;
            height: 100rpx;
            margin-left: 30rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .wrapper-conHeight {
    height: calc(100vh - 114px);
  }
}
</style>
